<template>
	<div>
		<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
			<el-form-item label="名称" prop="materialName">
				<el-autocomplete style="width: 250px" popper-class="wasteName-autocomplete" v-model="form.materialName"
					:fetch-suggestions="querySearchAsync" @select="handleSelect">
					<template slot-scope="props">
						<div class="name">{{ props.item.materialName }}</div>
					</template>
				</el-autocomplete>
			</el-form-item>
			<el-form-item label="计量单位" prop="unitCode">
				<el-select v-model="form.unitCode" style="width: 250px;">
					<el-option :label="item.value" :value="item.code" v-for="(item,index) in unitList">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="text-align: center;margin-left: -90px!important;">
				<el-button v-if="editData && editData.id" type="danger" @click="deleteThis">删除</el-button>
				<el-button type="primary" @click="saveOrUpdate">保存</el-button>
				<el-button @click="cancle">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	let that
	export default {
		name: 'addMateria',
		components: {},
		props: ['outletId', 'editData'],
		data() {
			return {
				params: {
					ticketId: '',
				},
				form: {
					materialId: '',
					materialName: '',
					unitCode: '',
					unitValue: '',
				},

				formRules: {
					materialName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				wasteList: [],
				unitList: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.form.outletId = that.outletId
			if (that.editData) that.form = that.editData

			that.getUnitList();
			that.getEntAuxiliaryMaterialList()
		},
		methods: {
			cancle() {
				that.$emit("cancle", true)
			},

			getUnitList: function() {
				var _this = this;
				that.ajax({
					url: '/codeType/listCodeValue',
					data: {
						typeCode: 'UNIT_TYPE'
					},
					success: function(data) {
						if (data.status == 1) {
							_this.unitList = data.data;
						}
					}
				});
			},

			querySearchAsync(queryString, cb) {
				var wasteList = this.wasteList;
				var results = queryString ? wasteList.filter(this.createStateFilter(queryString)) : wasteList;
				setTimeout(function() {
					cb(results);
				}, 1000)
			},

			createStateFilter(queryString) {
				return (state) => {
					return (state.materialName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},

			handleSelect(item) {
				that.form.materialName = item.materialName
				that.form.materialId = item.id
			},

			//删除危废
			deleteThis() {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletMaterial?ticketId=' + that.params.ticketId,
						data: {
							gasOutletMaterialId: that.editData.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.status && result.data) {
								that.data = that.$options.data()
								that.$forceUpdate()
								that.$emit("success", true)
							}
						}
					})
				})
			},

			saveOrUpdate: function() {
				var _this = this;
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: '/gasOutlet/saveOrUpdateGasOutletMaterial?ticketId=' + that.params
								.ticketId,
							data: JSON.stringify(_this.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.status == 1 && result.data) {
									that.data = that.$options.data()
									that.$forceUpdate()
									if (_this.form.id) {
										that.$emit("success", true)
									} else {
										that.$emit("success", true)
									}
								} else {}
							}
						});
					}
				});
			},

			getEntAuxiliaryMaterialList: function() {
				that.ajax({
					url: '/entAuxiliaryMaterial/getEntAuxiliaryMaterialList?ticketId=' + that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						if (result.status == 1) {
							that.wasteList = result.data
						}
					}
				})
			},

		}
	}
</script>

<style>

</style>